<template>
    <div class="container-wrap">
        <div class="container-input">
            <div class="input">
                <div class="img">
                    <img :src="callPhoneImg" />
                </div>
                <input v-model="phone" type="text" placeholder="请输入手机号码" maxlength="11">
                <button class="send-code" @click="sendCode" :disabled="sending">{{btnText}}</button>
            </div>
            <div class="input">
                <div class="img">
                    <img :src="verificationImg" />
                </div>
                <input v-model="code" type="text" placeholder="请输入验证码" maxlength="6">
            </div>
            <div class="input">
                <div class="img">
                    <img :src="passWordImg" />
                </div>
                <input v-model="password" type="password" placeholder="请输入密码(6-12个字符)" maxlength="12" minlength="6">
            </div>
        </div>
        <button class="save-button" @click="save">保&nbsp;&nbsp;存</button>
        <van-toast id="van-toast" />
    </div>
</template>

<script>
    import { ForgetPassword, GetPhoneSmsCodeOther } from '@/providers/service'

    export default {
        name: 'forget',
        data() {
            return {
                phone: '',
                code: '',
                password: '',
                btnText: '获取验证码',
                sending: false,
                time: 60,
                loading: false,
                verificationImg: `${process.env.PUBLICIIMGURL}verification.gif`,
                callPhoneImg: `${process.env.PUBLICIIMGURL}callPhone.gif`,
                passWordImg: `${process.env.PUBLICIIMGURL}passWord.gif`,
            }
        },
        methods: {
            async ForgetPasswordFn() {
                try {
                    let params = { Mobile: this.phone, NewPassWord: this.password, SmsCode: this.code }
                    let res = await ForgetPassword(params)
                    this.$toast('保存成功')
                    if (!res) {
                        setTimeout(()=>{
                            this.$router.replace({ path: "/pages/login/index" ,query:{
                                type:'init'
                            }})
                        },1000)
                    }
                } catch (error) {
                    console.log(error)
                }

            },
            async GetPhoneSmsCodeOtherFn() {
                try {
                    let params = { Mobile: this.phone }
                    let res = await GetPhoneSmsCodeOther(params)
                    if(!res){
                        this.$toast('验证码已发送，请查收')
                        this.sending = true
                        this.timer()
                    }
                } catch (error) {
                    console.log(error)
                }
            },
            sendCode() {
                let phone = this.phone
                let reg = /^1[3|4|5|7|8][0-9]{9}$/
                if (phone.length === 0) {
                    this.$toast('您还未输入手机号码，请先输入手机号码后再获取验证码')
                    return false
                } else if (!reg.test(phone)) {
                    this.$toast('不是有效的手机号码')
                    return false
                } else {
                    this.GetPhoneSmsCodeOtherFn()
                }
            },

            save() {
                let regMobile = /^1[3|4|5|7|8][0-9]{9}$/
                if (!this.phone) {
                    this.$toast('手机号码不能为空')
                    return false
                } else if (!regMobile.test(this.phone)) {
                    this.$toast('不是有效的手机号码')
                    return false
                }
                //验证码
                if(!this.code){
                    this.$toast('验证码不能为空')
                    return false
                } else if (this.code.length < 6) {
                    this.$toast('请输入完整的验证码')
                    return false
                }
                //秘密PassWord
                if(!this.password){
                    this.$toast('密码不能为空')
                    return false
                } else if (this.password.length < 6) {
                    this.$toast('密码长度不能小于6')
                    return false
                }
                this.ForgetPasswordFn()
            },
            timer() {
                if (this.time > 0) {
                    this.time--
                    this.btnText = this.time + 's后获取'
                    setTimeout(this.timer, 1000)
                } else {
                    this.time = 60
                    this.btnText = '获取验证码'
                    this.sending = false
                }
            },
        },
        onShow(){
            this.phone= ''
            this.code=''
            this.password= ''
        }
    }
</script>

<style lang="less" scoped>
    page {
        height: 100%;
        width: 100%;
    }

    .loading {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }


    .container-wrap {
        margin-top: 100rpx;

        .container-input {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            height: 100%;
            box-sizing: border-box;

            .input {
                width: 654rpx;
                height: 72rpx;
                border: 4rpx solid #1da081;
                border-radius: 14rpx;
                margin-bottom: 40rpx;
                align-items: center;
                font-size: 24rpx;

                .img image {
                    position: relative;
                    left: 14rpx;
                    top: 10rpx;
                    width: 48rpx;
                    height: 50rpx;
                    float: left;
                }

                input {
                    width: 420rpx;
                    height: 74rpx;
                    float: left;
                    margin-left: 40rpx;
                }

                .send-code {
                    position: absolute;
                    float: left;
                    right: 60rpx;
                    height: 72rpx;
                    font-size: 24rpx;
                    text-align: center;
                    line-height: 72rpx;
                    padding: 0;
                    color: #1da081;
                    background-color: #FFF;

                    &::after {
                        border: none
                    }
                }
            }
        }

        .save-button {
            width: 660rpx;
            height: 80rpx;
            background: #1da081;
            text-align: center;
            line-height: 80rpx;
            border-radius: 14rpx;
            margin-top: 114rpx !important;
            margin: 100rpx auto;
            font-size: 32rpx;
            color: #fff;
        }
    }
</style>
